<!--
 * @Description: 
 * @Author: 胡涛
 * @Date: 2023-09-24 23:25:19
 * @LastEditors: 胡涛
 * @LastEditTime: 2023-10-09 21:14:27
-->
<template>
  <div class="page-wrapper">
    <div class="toolbar">
      <div class="breadcrumb">
        <a-breadcrumb>
          <a-breadcrumb-item>系统管理</a-breadcrumb-item>
          <a-breadcrumb-item>配置管理</a-breadcrumb-item>
        </a-breadcrumb>
      </div>
    </div>
    <div class="container">
      <a-tabs v-model="currentScope">
        <a-tab-pane
          :tab="system.label"
          v-for="system in moduleScopes"
          :key="system.value"
        >
          <a-tabs v-model="currentKey">
            <a-tab-pane
              :tab="group.name"
              v-for="group in categoryItems"
              :key="group.id"
            >
              <a-form v-if="currentKey == group.id">
                <a-form-item
                  v-for="item in currentCategorys.defineFields"
                  :key="item.key"
                  :label="item.keyName"
                >
                  <a-input v-model:value="currentModel[item.key]"></a-input>
                </a-form-item>
              </a-form>
            </a-tab-pane>
          </a-tabs>
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>

<script lang="ts" setup>
import cateoryApi from "@/api/system/configCategory";
import api from "@/api/system/configSetting";
import {
  ConfigCategoryDto,
  ConfigDefineAndSettingDto,
  ConfigDefineDto,
} from "@/api/system/types";
import { dictionaryOptions } from "@/plugins/dictionary";
import { computed, onMounted, ref, watch } from "vue";

/**
 * 当前系统
 */
const currentScope = ref("");
const currentKey = ref("");

/**
 * 子系统模块字段集合
 */
const moduleScopes = ref(dictionaryOptions("Platform.Modules"));

/**
 * 当前配置数据信息
 */
const currentCategorys = ref<ConfigDefineAndSettingDto>();

/**
 * 所有分类
 */
const allCategoryItems = ref<Array<ConfigCategoryDto>>([]);

const currentModel = ref<any>({});

/**
 * 当前系统对应的配置栏目
 */
const categoryItems = computed(() => {
  return allCategoryItems.value.filter((x) =>
    x.moduleScope.includes(currentScope.value)
  );
});

let parseDefineDeaultValue = (item: ConfigDefineDto) => {
  item.defaultValue;
};

let createSettingModel = (data: ConfigDefineAndSettingDto) => {
  let model: Record<string, any> = {};
  data.defineFields.map((x) => {
    model[x.key] = parseDefineDeaultValue(x);
  });
  data;
};

onMounted(async () => {
  allCategoryItems.value = (
    await cateoryApi.getList({
      Status: true,
      maxResultCount: 100,
    })
  ).items;
  if (moduleScopes.value.length) {
    currentScope.value = moduleScopes.value[0].value as string;
  }
});

watch(
  () => categoryItems.value,
  () => {
    if (categoryItems.value.length) {
      currentKey.value = categoryItems.value[0].id;
    }
  }
);

watch(
  () => currentKey,
  async () => {
    let data = await api.getConfigSetting({
      Category: currentKey.value,
      Level: 2,
      ModuleCode: currentScope.value,
    });
    createSettingModel(data);
    currentCategorys.value = data;
  }
);
</script>

<style lang="less" scoped></style>
